<template>
  <div id="userLoginView">
    <h2 style="margin-bottom: 16px">个人中心</h2>

    <!--     查看对话框-->
    <div>
      <a-modal v-model:visible="visible" @ok="handleOk" width="60%">
        <a-form
          :model="userData"
          name="basic"
          autocomplete="off"
          @finish="onFinish"
        >
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="id" name="id">
                <a-input v-model:value="userData.id" placeholder="请输入id" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="登录名" name="menuName">
                <a-input
                  v-model:value="userData.userAccount"
                  placeholder="请输入登录名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="用户名" name="type">
                <a-input
                  v-model:value="userData.userName"
                  placeholder="请输入用户名"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="角色名称" name="flag">
                <a-input
                  v-model:value="userData.userRole"
                  placeholder="请输入角色名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="公司名" name="route">
                <a-input
                  v-model:value="userData.company"
                  placeholder="请输入公司名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="岗位" name="route">
                <a-input
                  v-model:value="userData.job"
                  placeholder="请输入岗位"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="部门" name="route">
                <a-input
                  v-model:value="userData.dept"
                  placeholder="请输入部门"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
    </div>

    <a-card>
      <div v-if="userData" :key="userData.id">
        <a-descriptions title="用户信息">
          <a-descriptions-item label="id"
            >{{ userData.id }}
          </a-descriptions-item>
          <a-descriptions-item label="登录名"
            >{{ userData.userAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="用户名"
            >{{ userData.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="角色名称"
            >{{ userData.userRole }}
          </a-descriptions-item>
          <a-descriptions-item label="公司"
            >{{ userData.company }}
          </a-descriptions-item>
          <a-descriptions-item label="部门"
            >{{ userData.dept }}
          </a-descriptions-item>
          <a-descriptions-item label="岗位"
            >{{ userData.job }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>

    <a-button type="primary" @click="showModal">修改</a-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { UserControllerService, UserLoginRequest } from "../../../generated";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import router from "@/router";

// 点击，执行修改
const onFinish = () => {
  updateUser();
};

//弹窗是否显示
const visible = ref<boolean>(false);
// 展示弹窗
const showModal = (id: number) => {
  visible.value = true;
};
// 弹窗确认
const handleOk = (e: MouseEvent) => {
  updateUser();
  visible.value = false;
};

// 登陆用户信息
let userData = ref({});

//
onMounted(() => {
  getLoginUser();
});

// 登录用户
const getLoginUser = async () => {
  const res = await UserControllerService.getLoginUserUsingGet();
  // 查询成功，跳转到主页
  if (res.code === 0) {
    userData.value = res.data;
  }
};

// 修改用户
const updateUser = async () => {
  message.success("修改用户信息成功");
};
</script>
